<template>
    <div class="mine">
        <!-- 头部 -->
        <myHeader title="发现" :find="true"></myHeader>
        <!-- 中部按钮 -->
        <div v-if="!flag" >
            <div class="imgBox">
                <img class="midImg" src="http://81.69.235.62/project/travel/static/mine.1e738d97.gif" alt="" />
                <van-button class="loginbtn" type="success" @click="gotoLogin">授权登录</van-button>
            </div>
            <p>操作列表</p>
            <van-cell title="公告" icon="setting-o" is-link />
            <van-cell title="设置" icon="setting-o" is-link />
            <van-cell title="联系我们" icon="setting-o" is-link />
            <van-cell title="清除缓存" icon="setting-o" is-link />
        </div>
        <div class="concent" v-else>
            <div class="imgBox">
                <img class="midImg" src="http://81.69.235.62/project/travel/static/mine.1e738d97.gif" alt="" />
                <div class="loginLast">
                    <img class="loginLastImg" src="http://81.69.235.62/project/travel/static/photo.8d272298.png" alt="" />
                    <p class="namebox">{{ obj.userRes.username }}</p>
                    <p>{{ obj.userRes.phone }}</p>
                </div>
                <div>
                    <van-cell title="我的游记" icon="setting-o" is-link />
                    <van-cell title="我的评论" icon="setting-o" is-link />
                    <van-cell title="我的点赞" icon="setting-o" is-link />
                    <van-cell title="我的收藏" icon="setting-o" is-link />
                    <van-cell title="钱包" icon="setting-o" is-link />
                    <van-cell title="修改密码" icon="setting-o" is-link />
                    <van-cell title="公告" icon="setting-o" is-link />
                    <van-cell title="设置" icon="setting-o" is-link />
                    <van-cell title="联系我们" icon="setting-o" is-link />
                    <!-- <van-cell title="清除缓存" icon="setting-o" is-link /> -->
                </div>
                <van-button type="primary" block @click="exitBtn">退出登录</van-button>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const gotoLogin = () => {
    router.push("/login");
};
const flag = ref(false); //假设一开始没有token
const obj = ref({});
onMounted(() => {
    const str = sessionStorage.getItem("userLogin");
    if (str) {
        obj.value = JSON.parse(str);
        console.log(obj.value.userRes);
        console.log(obj.value.userToken);
        obj.value.userToken ? (flag.value = true) : (flag.value = false);
    }
});
//点击退出按钮
const exitBtn = () => {
    sessionStorage.setItem("userLogin", "{}");
    // router.push("/home");
};
</script>
  
<style lang="scss">
.search {
    margin-right: 50px;
}

.mine {
    width: 100%;
    height: 100%;

    .imgBox {
        width: 100%;
        height: 40%;
        position: relative;

        .midImg {
            width: 100%;
            height: 100%;
            display: block;
        }

        .loginbtn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .loginLast {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            .loginLastImg {
                width: 200px;
                height: 200px;
            }

            .namebox {
                display: flex;
                justify-content: space-around;
            }
        }
    }
}
</style>
  